<template>
  <div class="riskItem h100">
    <list-table-new
      v-bind="matterItemConfig"
      ref="riskItemTable"
    ></list-table-new>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      height="400"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <div class="h100" style="margin: 40px 60px 40px 0">
        <editForm
          :formConfig="formConfig"
          ref="editForm"
          :formData="editFormData"
        ></editForm>
      </div>
    </dialogPublic>
  </div>
</template>

<script>
import {
  queryMatterList,
  insertMatter,
  addOrUpdateMatter,
  deleteMatter,
} from "@/api/operationManagement/handoverMatter.js";
export default {
  props: {
    shiftId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      show: false,
      title: "",
      matterItemConfig: {
        showIndex: true,
        selectionShow: false,
        showFilterBtn: false,
        showCustomBtn: false,
        showPagination: false,
        showSearch: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            //this.synchronizeRiskData(params, sortStr);
          },
          searchArr: [],
          queryData: {},
        },
        tableMethods: {
          rowClick: (row) => {},
        },
        actionList: [
          {
            name: "新增",
            icon: "el-icon-plus",
            method: () => {
              this.addMatterItem();
            },
          },
        ],
        column: [
          {
            label: "一级项",
            prop: "firstLevel",
            showTooltip: true,
          },
          {
            label: "二级项",
            prop: "secondLevel",
          },
          {
            label: "是否展示",
            prop: "displayFlag",
            formatter: (row) => {
              return row.displayFlag ? "是" : "否";
            },
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            scopeType: "textButton",
            //width:"240px",
            buttonArr: [
              {
                text: "编辑",
                // icon: "el-icon-edit",
                isShow: (row) => {
                  return true;
                },
                methods: (row) => {
                  this.formConfig.itemArr[0].disabled = false;
                  this.editFormData = row;
                  this.title = "编辑配置项";
                  this.show = true;
                },
              },
              {
                text: "向上插入",
                // icon: "el-icon-edit",
                isShow: (row) => {
                  return true;
                },
                methods: (row, index) => {
                  this.insert(row, index);
                },
              },
              {
                text: "删除",
                // icon: "el-icon-delete-solid",
                isShow: (row) => {
                  return true;
                },
                methods: (row) => {
                  this.$confirm("确定要删除这条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.delete(row.id);
                    })
                    .catch(() => {});
                },
              },
            ],
          },
        ],
        tableData: [],
        arraySpanMethod: ({ row, column, rowIndex, columnIndex }) => {
          if (columnIndex == 1) {
            return {
              rowspan: this.paramsRowSpanArr[rowIndex],
              colspan: 1,
            };
          }
        },
      },
      formConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "一级项",
            prop: "firstLevel",
            type: "text",
            span: 24,
            required: true,
            disabled: false,
          },
          {
            label: "二级项",
            prop: "secondLevel",
            type: "text",
            span: 24,
            required: true,
            disabled: false,
          },
          {
            label: "默认内容",
            prop: "content",
            type: "textarea",
            span: 24,
            rows: 4,
            required: true,
            disabled: false,
          },
          {
            label: "是否展示",
            prop: "displayFlag",
            type: "radio",
            span: 24,
            radioOption: [
              { label: "是", value: 1 },
              { label: "否", value: 0 },
            ],
            required: true,
            disabled: false,
          },
        ],
      },
      //弹出框表单数据
      editFormData: {},
      rowIndex: 0,
      rowSpanArr: [],
      position: 0,
      paramsRowSpanArr: [],
      spanIndex: 0,
      currentRow: {},
      topRow: {},
    };
  },
  created() {
    this.getMatterItemList();
  },
  methods: {
    //获取配置项列表
    getMatterItemList() {
      queryMatterList({ recordId: this.shiftId }).then((res) => {
        let data = res.data;
        this.$set(this.matterItemConfig, "tableData", data);
        this.getParamsRowSpan();
      });
    },
    //数据记录项的合并规则
    getParamsRowSpan() {
      this.paramsRowSpanArr = [];
      this.matterItemConfig.tableData.forEach((item, index) => {
        if (index == 0) {
          this.paramsRowSpanArr.push(1);
          this.spanIndex = 0;
        } else {
          if (
            item.firstLevel ==
            this.matterItemConfig.tableData[index - 1].firstLevel
          ) {
            this.paramsRowSpanArr[this.spanIndex] += 1; //项目名称相同，合并到同一个数组中
            this.paramsRowSpanArr.push(0);
          } else {
            this.paramsRowSpanArr.push(1);
            this.spanIndex = index;
          }
        }
      });
    },
    //新增配置项
    addMatterItem() {
      this.formConfig.itemArr[0].disabled = false;
      this.editFormData = {
        displayFlag: 1,
      };
      this.title = "新增配置项";
      this.show = true;
    },
    //插入
    insert(row, index) {
      this.formConfig.itemArr[0].disabled = false;
      this.currentRow = row;
      this.currentIndex = index;
      let form = {
        displayFlag: 1,
      };
      this.topRow =
        index != 0 ? this.matterItemConfig.tableData[index - 1] : null;
      if (index != 0) {
        if (this.topRow.firstLevel == this.currentRow.firstLevel) {
          form.firstLevel = this.topRow.firstLevel;
          this.formConfig.itemArr[0].disabled = true;
        }
      }
      this.editFormData = form;
      this.title = "插入配置项";
      this.show = true;
    },
    //表单提交
    async doSubmit() {
      try {
        let formData = await this.$refs.editForm.getFormData();
        formData.recordId = this.shiftId;
        let res;
        if (this.title == "插入配置项") {
          if (this.allowInsert(formData)) {
            formData.sort = this.currentRow.sort;
            res = await insertMatter(formData);
          } else {
            this.$alert("存在相同的一级项，请插入正确的位置", "", {
              confirmButtonText: "确定",
              center: true,
            });
            return;
          }
        } else {
          res = await addOrUpdateMatter(formData);
        }
        this.$message.success(res.description);
        this.getMatterItemList();
        this.show = false;
      } catch (error) {
        console.log(error);
      }
    },
    //是否允许插入
    allowInsert(formData) {
      let data = this.matterItemConfig.tableData.filter((item) => {
        return formData.firstLevel == item.firstLevel;
      });
      if (data.length > 0) {
        let res = data.every((item) => {
          return (
            item.firstLevel != this.currentRow.firstLevel &&
            (!this.topRow || item.firstLevel != this.topRow.firstLevel)
          );
        });
        if (res) {
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    },
    //删除配置项详情
    delete(id) {
      deleteMatter({ id: id }).then(
        (res) => {
          if (res.code == 200) {
            this.$message.success(res.description);
            this.getMatterItemList();
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取选中的数据
    getSelectData() {
      return this.$refs.riskItemTable.getSelectData();
    },
  },
};
</script>

<style lang="less" scoped>
.riskItem {
}
</style>